<template>
  <dl v-for="(item, index) of contractList" :key="index" @click="gotoDetail(item.id)">
    <dd>
      <h3>移动端小程序前端开发前端工程师</h3>
      <span>履约中</span>
      <van-icon name="arrow"/>
    </dd>
    <dt>
      <label>公司名称</label>
      <span>北京驻场无忧科技有限公司</span>
    </dt>
    <dt>
      <label>合约类型</label>
      <span>技术服务</span>
    </dt>
    <dt>
      <label>合约周期</label>
      <span></span>
    </dt>
    <dt>
      <label>合约进度</label>
      <span></span>
    </dt>
    <dt>
      <label>签约时间</label>
      <span></span>
    </dt>
    <dt class="contract-progress">
      <i class="green"></i>
      <i class="green"></i>
      <i class="orange"></i>
      <i class="red"></i>
    </dt>
  </dl>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";

const router = useRouter()
const {contractList} = defineProps({
  contractList: {
    type: Array,
    default: () => []
  }
})
const gotoDetail = (id: any) => {
  router.push('/contract/details/' + id)
}
</script>
<style scoped>
dl {
  padding: 1rem 0.7rem;
  border-bottom: 1px solid #eeeeee;
  font-size: 0.64rem;
  color: #666666;
}

dl dd {
  display: flex;
  margin-bottom: 0.9rem;
  align-items: center;
}

dl dd i {
  font-size: 0.75rem;
}

dl dd h3 {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 500;
  color: #333333;
}

dl dd span {
  text-align: right;
  font-size: 0.75rem;
  color: #ff9415;
}

dl dt {
  display: flex;
  margin-bottom: 0.72rem;
}

dl dt:last-child {
  margin-bottom: 0;
}

dl dt label {
  flex: 1;
}

dl dt span {
  text-align: right;
}

.contract-progress {
  display: flex;
  width: 100%;
  height: 0.53rem;
}

.contract-progress i {
  flex: 1;
  margin: 0 1px;
  background: #f3f3f3;
}

.contract-progress i.green {
  background: #50d400;
}

.contract-progress i.orange {
  background: #fe9215;
}

.contract-progress i.red {
  background: #ff4800;
}
</style>